import React from 'react'
import { g, sty } from '../../tool'

export default class Picker extends React.PureComponent {
    static defaultProps = {
        normalImg: '',
        selectedImg: '',
        disableImg: '',
        type: 'normal', //normal, selected, disable
    }
    render() {
        this._state = this.state
        this._props = this.props
        let { normalImg, selectedImg, disableImg, type, style, ...rest } = this.props
        let rootSty = {
            width: g.px(64),
            height: g.px(64),
            ...style
        }
        let normalSty = {
            ...sty.img(normalImg, '100%'),
            position: 'absolute',
            pointerEvents: 'none',
            opacity: this.props.type === 'normal' ? 1 : 0,
        }
        let selectedSty = {
            ...sty.img(selectedImg, '100%'),
            position: 'absolute',
            pointerEvents: 'none',
            opacity: this.props.type === 'selected' ? 1 : 0,
        }
        let disableSty = {
            ...sty.img(disableImg, '100%'),
            position: 'absolute',
            pointerEvents: 'none',
            opacity: this.props.type === 'disable' ? 1 : 0,
        }
        return (
            <div style={rootSty} {...rest}>
                <div style={normalSty}></div>
                <div style={selectedSty}></div>
                <div style={disableSty}></div>
                {this.props.children}
            </div>
        )
    }
}